<template>
  <div class="modal-custom-base-wrap">
    <el-dialog
      :title="modalTitle"
      width="1200px"
      custom-class="modal-custom-base"
      :close-on-click-modal="false"
      :visible.sync="show"
      :before-close="onModalClose"
    >
      <div class="modal-ctx">
        <!-- 循环数据 -->
        <div class="loop-wrap">
          <div class="table-sec" v-if="show">
           
          </div>
        </div>
        <!-- 循环数据 -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">关闭</el-button>
        <!-- <el-button type="primary" @click="form_submit()">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";


export default {
  name: "modal-hetong",
  components: {
 
  },
  props: {},
  data() {
    return {
      mode: "", // 增 || 改
      show: false,
      otherQueryParams: {},

      pageActionType: "",
      routeName: "",
      modalTitle: "",
    };
  },
  computed: {
    // modal_title() {
    //   return "回复列表";
    // },
  },
  watch: {
    show(val) {
      if (!val) {
        this.otherQueryParams = {};
        this.$store.commit("set_vuex_iframe_page_data", {
          show: false,
          option: null,
        });
      }
    },
  },

  created() {},
  mounted() {},

  methods: {
    async init(option) {
      console.warn("初始参数 [option]", JSON.parse(JSON.stringify(option)));
      option = JSON.parse(JSON.stringify(option));

      let {
        //
        pageActionType,
        routeName,
        modalTitle,
        data,
        otherQueryParams,
        hiddenColumnsForAdd,
      } = option;
      this.$store.commit("set_vuex_iframe_page_data", {
        show: true,
        option: option,
      });
      this.pageActionType = pageActionType;
      this.routeName = routeName;
      this.modalTitle = modalTitle;

      this.otherQueryParams = otherQueryParams;
      this.show = true;

      this.$nextTick(() => {
        if (this.$refs[routeName].resetView) {
          this.$refs[routeName].resetView();
        }
      });
    },

    onModalClose() {
      this.show = false;
    },

    // 表格操作
    handleTableRowDelete(item, scope) {
      console.warn("表格行删除", { ...item });
      console.warn("表格行删除", scope);

      this.tableData.splice(scope.$index, 1);
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .modal-custom-base {
  margin-top: 50px !important;

  .el-dialog__header {
    .flex-between();
    border-bottom: 1px solid #eee;
    // background: #a98c4d;
    // background: #f7f7f7;
    // height: 50px;
    // line-height: 50px;
    // padding: 0 15px;
    // font-size: 14px;
    // color: #333;

    .el-dialog__title {
      color: #000;
    }
    .el-dialog__headerbtn {
      // top: 0;
      .el-dialog__close {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: 30px 40px;
    padding: 0px 15px;
    max-height: calc(100vh - 100px - 150px);
    overflow-y: auto;
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      border: 8px solid #409eff;
      background: #fff;
    }
    &::-webkit-scrollbar {
      width: 8px;
      height: 0px;
    }
  }

  .el-dialog__footer {
    // text-align: center;
    border-top: 1px solid #eee;
  }
}

.modal-ctx {
  // padding: 30px 50px;
  // max-height: 60vh;
  // overflow-y: auto;
  // border-bottom: 1px solid #ddd;
}

// 处理表单样式
/deep/ .el-upload {
  // width: auto;
}

/deep/ .el-upload-list__item {
  // padding: 0 10px;
  // height: 32px;
  // line-height: 32px;
  background: #eef6ff !important;
  font-size: 16px;
}

.table-sec {
  margin-top: 20px;
  margin-top: 0;

  .loop-add {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
